import React, { Component } from "react";

import { PickerView } from "antd-mobile";

import FilterFooter from "../../../../components/FilterFooter";

export default class FilterPicker extends Component {
  // 在三个标题之间来回切换时,默认选中值不生效
  // 原因:没有重新创建FilterPicker 组件时,不会生效
  // 解决: 给 FilterPicker 组件添加key值为 openType, key不同时,会重新创建该组件

  state = {
    value: this.props.defaultValue,
  };
  render() {
    const { onCancel, onSave, data, cols, type } = this.props;
    const { value } = this.state;
    return (
      <div>
        {/* 选择器组件 */}
        <PickerView
          data={data}
          value={value}
          cols={cols}
          onChange={(val) => {
            this.setState({
              value: val,
            });
          }}
        />

        {/* 底部按钮 */}
        <FilterFooter
          onCancel={() => onCancel(type)}
          onSave={() => onSave(type, value)}
        />
      </div>
    );
  }
}
